<template>
  <view class="imgSet">
    <custom-navi :show-home="false">
      {{idx+1}}/{{imgList.length}}
      <view class="del-btn" slot="right" @tap="handleDelete">删除</view>
    </custom-navi>
    <image :src="imgList[idx].url" mode="widthFix" class="banner" />
    <view class="bottom">
      <image src="/static/tpbj.png" mode="widthFix" />
      <input
        class="bottom-tit"
        placeholder="添加图片标题"
        :value="imgList[idx].title"
        @input="onKeyInput"
      />
      <!-- <view class="bottom-tit">{{imgList.title||'添加图片标题'}}</view> -->
      <button @tap="handleSure">确定</button>
    </view>
  </view>
</template>

<script>
import { deleteStoreAlbumUrl, editStoreAlbum } from '../../../../api'
export default {
  data () {
    return {
      imgList: [],
      idx: 0,
      inputValue: '',
      type: '',
      shopinfo: ''
    }
  },
  onLoad (option) {
    this.idx = parseInt(option.id)
    this.type = option.type || ''
    this.imgList = uni.getStorageSync('albumList') || [];
    this.shopinfo = uni.getStorageSync('shopInfo')
  },
  methods: {
    async handleSave () {

      const params = {
        albumId: this.imgList[0].id,
        albumUrl: this.imgList[0].albumUrl,
        title: this.inputValue
      }
      console.log(params)
      try {
        const { data } = await editStoreAlbum(params)
        return this.$utils.common.toast.fail("保存成功");

      } catch (err) {
        if (err.code) {
          if (err.code !== 200) {
            return this.$utils.common.toast.fail(err.data.message);
          }
          return this.$utils.common.toast.fail(err.errMsg);
        }
      }
    },
    async  handleIndexDel (id) {
      const params = {
        id: id
      }
      try {
        const { data } = await deleteStoreAlbumUrl(params)
        this.$utils.common.toast.fail("删除成功");
        setTimeout(() => {
          return this.$utils.common.navigateBack()
        }, 1500)
      } catch (err) {
        if (err.code) {
          if (err.code !== 200) {
            return this.$utils.common.toast.fail(err.data.message);
          }
          return this.$utils.common.toast.fail(err.errMsg);
        }
      }
    },
    handleDelete () {
      // if (this.type === 'index') {
      this.handleIndexDel(this.imgList[0].id)
      // }
      // this.imgList.splice(this.idx, 1)
      // console.log(this.imgList)
      // uni.setStorageSync('albumList', this.imgList);
      // this.$utils.common.navigateBack()
    },
    async handleSure () {
		
      this.imgList[this.idx].title = this.inputValue
      uni.setStorageSync('albumList', this.imgList);
	  // console.log(this.imgList)
	  // console.log(this.type)
      if (this.type === 'index') {
        await this.handleSave()
        setTimeout(() => {
          uni.removeStorageSync('albumList');
          this.$utils.common.navigateBack()
        }, 1500)
      } else {
        this.$utils.common.navigateBack()
      }



    },
    onKeyInput: function (event) {
      this.inputValue = event.target.value
    },
  },
}
</script>

<style>
page {
  background-color: #000000;
}
</style>
<style lang="scss" scoped>
.imgSet {
  .del-btn {
    color: #ffffff;
  }
  .banner {
    width: 100vw;
    margin-top: 156rpx;
  }
  .bottom {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 60rpx 0;
    position: fixed;
    width: 100vw;
    bottom: 0;
    button {
      position: absolute;
      right: 32rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 56rpx;
      color: rgba(255, 255, 255, 1);
      opacity: 1;
      width: 116rpx;
      height: 56rpx;
      background: rgba(12, 212, 211, 1);
      opacity: 1;
      border-radius: 4rpx;
    }
    &-tit {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;

      color: rgba(255, 255, 255, 1);
      opacity: 1;
    }
    image {
      margin-left: 32rpx;
      margin-right: 22rpx;
      width: 40rpx;
    }
  }
}
</style>